<script>
export default {
    props: {
        title: {type: String, required: true}
    },
    data() {
        return {
            renderTitle: `这里是 - ${this.title}`,
            num: 1
        };
    },
    methods: {
        clickNumAddBtn() {
            this.num++;
            console.log(`传统组件num: ${this.num}`);
        }
    }
};
</script>

<template>
  <div class="container">
    <div class="title">{{renderTitle}}</div>
    <div class="button" @click="clickNumAddBtn">num+1</div>
    <p>num： {{num}}</p>
  </div>
</template>

<style scoped>
.container{
    padding: 20px;
}
.button{
    height: 24px; line-height: 24px; font-size: 16px; width: 60px; border: 1px solid green; 
    border-radius: 6px; text-align: center;
}
</style>
